<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>易买网</title>
      <link rel="stylesheet" type="text/css" href="./css/style.css" />
      <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
      <script type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
  </head>
  <body>
      <!--头部-->
      <jsp:include page="commons/header.jsp" />

      <div id="main" class="wrap">
          <!--左侧分类-->
          <jsp:include page="commons/left.jsp" />

          <!-- 主要内容 -->
          <div class="main">
              <div id="register" class="main">
                  <!--注册框-->
                  <div class="shadow" style="float:left;width: 500px;margin: 0px 15px">
                      <em class="corner lb"></em>
                      <em class="corner rt"></em>
                      <div class="box">
                          <h1>欢迎注册易买网</h1>
                          <ul class="steps clearfix">
                              <li class="current"><em></em>填写注册信息</li>
                              <li class="last"><em></em>注册成功</li>
                          </ul>
                          <form id="regForm" method="POST" action="/user" onsubmit="return checkForm()" style="padding: 0 0;">
                              <table>
                                  <tr>
                                      <td class="field">用户名(*)：</td>
                                      <td><input class="text" type="text" id="userName" name="userName" onblur="checkUserName()" />&nbsp;<font id="userErrorInfo" color="red"></font></td>
                                  </tr>
                                  <tr>
                                      <td class="field">登录密码(*)：</td>
                                      <td><input class="text"  type="password" id="password" name="password" /></td>
                                  </tr>
                                  <tr>
                                      <td class="field">确认密码(*)：</td>
                                      <td><input class="text" type="password"  id="rePassWord"  name="rePassWord"/></td>
                                  </tr>

                                  <tr>
                                      <td class="field">性别(*)：</td>
                                      <td>
                                          <input type="radio" name="sex" value="男" checked="checked"/>男&nbsp;&nbsp;
                                          <input type="radio" name="sex" value="女"/>女
                                      </td>
                                  </tr>
                                  <tr>
                                      <td class="field">出生日期：</td>
                                      <td>
                                          <input type="text"  id="birthday"  name="birthday"  class="Wdate" onClick="WdatePicker()"/>
                                      </td>
                                  </tr>
                                  <tr>
                                      <td class="field">身份证号：</td>
                                      <td><input class="text" type="text" id="dentityCode" name="dentityCode"  /></td>
                                  </tr>
                                  <tr>
                                      <td class="field">Email：</td>
                                      <td><input class="text" type="text" id="email" name="email"  /></td>
                                  </tr>
                                  <tr>
                                      <td class="field">手机号码(*)：</td>
                                      <td><input class="text" type="text" id="mobile" name="mobile" /></td>
                                  </tr>
                                  <tr>
                                      <td class="field">收获地址(*)：</td>
                                      <td><input class="text" type="text" id="address" name="address" /></td>
                                  </tr>
                                  <tr>
                                      <td></td>
                                      <td><label class="ui-green"><input type="submit" value="提交注册" /></label></td>
                                  </tr>
                                  <tr>
                                      <td>&nbsp;</td>
                                      <td><font id="error" color="red"></font></td>
                                  </tr>
                              </table>
                          </form>
                      </div>
                  </div>

                  <!--右侧公告和广告-->
                  <jsp:include page="commons/right.jsp" />

              </div>
          </div>
          <div class="clear"></div>
      </div>

      <!--底部-->
      <jsp:include page="commons/footer.jsp" />

  </body>
  <script src="js/jquery-1.11.1.js"></script>
  <script>
      $(document).ready(function() {
          var currentUser = '${currentUser}';
          if (currentUser != null && currentUser !='') {
              window.location.href = "/index";
              return;
          }
      });
      function checkForm(){
          // var 变量  userName是变量名  ; 通过$获取ID，就相当与拿到了这个元素的value   { val() }
          var userName=$("#userName").val();
          var password=$("#password").val();
          var rePassWord=$("#rePassWord").val();
          var mobile=$("#mobile").val();
          var address=$("#address").val();
          if(userName==""){
              $("#error").html("用户名不能为空"); //向error指定的元素中添加一句话！
              return false;
          }
          if(password==""){
              $("#error").html("密码不能为空");
              return false;
          }
          if(rePassWord==""){
              $("#error").html("确认密码不能为空");
              return false;
          }
          if(rePassWord!=password){
              $("#error").html("密码要与确认密码相同");
              return false;
          }
          if(mobile==""){
              $("#error").html("手机号码不能为空");
              return false;
          }
          if(address==""){
              $("#error").html("地址不能为空");
              return false;
          }
          return true;
      }

      function checkUserName() {
          //获取你在该元素中写的值
          var userName=$("#userName").val();
          if(userName==""){
              //如果是空的，对不起用户不能空！
              $("#userErrorInfo").html("用户名不能为空 !");
              //鼠标仍然存在此输入框中
              $("#userName").focus();
              return;
          }else{
              //否者我的这个userErrorInfo 什么都不做！
              $("#userErrorInfo").html("");
          }

          // Ajax请求
          // $.get("user?oper=checkName", {userName: userName}, function(data){
          //     if(data=='true'){
          //         $("#userErrorInfo").html("");
          //     }else{
          //         $("#userErrorInfo").html("用户名已存在，请重新输入！");
          //         $("#userName").focus();
          //     }
          // });
      }


  </script>

</html>